/**
 * @功能描述: 基础图片样式文件
 * @author: lzn
 * @date: 2022-09-21 16:21:38
 * @version: 1.0
 */
@import '../../style/index';

// 基础图片样式
@include b(base-image) {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

// 基础图片组件样式
@include b(base-image-layout) {
  position: relative;
  display: inline-block;
  // 图片蒙版样式
  .image-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $color-white;
    background: $image-background-mask;
    cursor: pointer;
    opacity: 0;
    transition: $fade-transition;
    &:hover {
      opacity: 1;
    }
  }
  // 提示信息样式
  .image-mask-info {
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    >svg {
      -webkit-margin-end: 4px;
      margin-inline-end: 4px;
    }
  }
}

// 图片加载失败样式
@include b(base-image-error) {
  text-align: center;
  svg {
    width: 25%;
    height: 25%;
    vertical-align: middle;
  }
}